// out: ../css/active3.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.box {
    width: 300px;
    height: 200px;
    background-color: red;
    margin: 200px auto;
    position: relative;

    .round1 {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1px solid #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: move 1s infinite;
    }

    .round2 {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1px solid #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: move 1s 0.5s infinite;
    }

    .round3 {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1px solid #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: move 1s 1s infinite;
    }
}

@keyframes move {
    to {
        transform: translate(-50%, -50%) scale(8);
        opacity: 0;
    }
}